* {
  margin: 0;
  padding: 0;
}

.bg {
  width: 100vw;
  height: 100vh;
  background-color: azure;
  background-image: url(../img/bg.default.png);
  /* background-image: url('file:///D:/图片/test.jpg'); */
  background-size: auto 100%;
  /* background-position: center; */
  background-repeat: repeat;
  /* display: flex; */
  /* justify-content: center; */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  font-size: 28px;
  /* align-items: center; */
}

.main {
  display: flex;
  /* justify-content: center; */
  /* justify-content: start; */
  padding: 20px;
  /* opacity: 0.7; */
  /* margin-left: 10%; */
}

/* left */
.left {
  width: 370px;
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.content-body {
  width: 200px;
  /* height: auto; */
}

.content-title {
  color: #272e38;
}

.content-text {
  display: flex;
  flex-direction: column;
}

.content-text .text {
  font-size: 16px;
  color: #a7a7a7;
}

.content-text .text:hover {
  color: #272e38;
}

/* right */
.right {
  width: 370px;
  border-radius: 10px;
  margin-left: 20px;
  height: calc(100vh - 40px);
}

.right .bottom {
  width: 370px;
  height: calc(100vh - 169px);
  margin-top: 15px;
  border-radius: 10px;
  background-color: white;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

/* popup */
.popup {
  min-width: 450px;
  max-width: 600px;
  padding: 10px;
  z-index: 10;
  background-color: white;
  border-radius: 15px;
  border: 2px #cccccc solid;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: 0.2s;
}

.popup .popup-text {
  font-size: 18px;
}

#editor {
  /* width: 250px; */
  min-width: 450px;
  /* border-radius: 15px; */
  /* padding: 20px; */
}

.editor-bg {
  border-radius: 15px;
  background-color: #272822;
  padding: 10px;
  margin-top: 10px;
}
